<template>
  <div class="channel">
    <van-tabs v-model:active="active" @click-tab="changes">
      <van-tab
        v-for="index in brotherCategory"
        :name="index.id"
        :title="index.name"
      >
        <h6>{{ currentCategory.name }}</h6>
        <em>{{ currentCategory.front_name }}</em>
        <ul class="list">
          <li v-for="item in list" :key="item.id">
            <img v-lazy="item.list_pic_url" :alt="item.name" />
            <p>{{ item.name }}</p>
            <span>￥{{ item.retail_price }}</span>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getGoodsList, getGoodsCategory } from "../server/goods.js";

const route = useRoute();
let active = ref(0);
let list = ref([]);
let brotherCategory = ref([]);
let currentCategory = reactive({});
// 获取分类区块
function getgoods(id = route.query.id) {
  getGoodsList({ categoryId: id, page: 1, size: 1000 }).then((res) => {
    list.value = res.data.goodsList;
  });
  getGoodsCategory({ id }).then((res) => {
    brotherCategory.value = res.data.brotherCategory;
    currentCategory = res.data.currentCategory;
  });
}
function changes(item) {
  getgoods(item.name);
}
onMounted(() => {
  active.value = route.query.id - 0;
  getgoods();
});
</script>

<style scoped>
.channel {
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.list {
  width: 100%;
  height: calc(100vh - 2.75rem);
  overflow-y: auto;
  padding: 0 0.625rem;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
h6 {
  font-size: 20px;
  line-height: 1;
  text-align: center;
  margin: 1.25rem 0;
  color: #666;
}
em {
  text-align: center;
  display: block;
  font-style: normal;
  line-height: 1;
  color: #666;
  margin-bottom: 0.625rem;
}
.list > li {
  width: 45%;
  margin: 0.625rem 0.3125rem;
  border-radius: 0.9375rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #f6f6f6;
  padding: 0.3125rem;
  box-sizing: border-box;
}
.list > li > img {
  width: 100%;
  border-radius: 0.9375rem;
}
.list > li > p {
  width: 100%;
  font-size: 0.75rem;
  color: #666;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
}
.list > li > span {
  color: red;
  text-align: center;
}
</style>
